<template>
  <div class="container">
   <div class="content">
     <div class="imgContainer">
       <el-image v-for="img in imgList" :key="img.id" :src="img.url" lazy @click="currentImg = img" :class="{'activeImg':img.id == currentImg.id}"/>
     </div>
     <div class="canvasContainer">
      <div class="operateBox">
        <el-button type="primary" @click="openDraw">开始绘制</el-button>
        <el-button type="primary" @click="closeDraw">结束绘制</el-button>
      </div>
      <!-- <img :src="currentImg.url" alt="" id="bitmap"> -->
       <canvas id="imgCvs">
         <img :src="currentImg.url" alt="" id="bitmap">
       </canvas>
       <!-- 可操作性的画布 -->
       <canvas id="oprCvs"></canvas>
     </div>
   </div>
  </div>
</template>

<script>
import mockData from './mock.json'
import Draw from './draw2.js'
export default {
  data() {
    return {
      imgList:[],
      currentImg:{},
      drawInstance:null
    }
  },
  components: {},
  created() {
    setTimeout(() => {
      this.imgList = mockData.images;
      this.currentImg = this.imgList[0];
    }, 0);
  },
  mounted() {
    this.initDraw();
  },
  methods:{
    initDraw() {
      let imgCvs = document.getElementById('imgCvs');
      imgCvs.width = imgCvs.offsetWidth;
      imgCvs.height = imgCvs.offsetHeight;
      let bitmap = document.getElementById('bitmap');
      let oprCvs = document.getElementById("oprCvs");
      oprCvs.width = oprCvs.offsetWidth;
      oprCvs.height = oprCvs.offsetHeight;
      let drawOption = {
        imgCvs: imgCvs,
        bitmap: bitmap,
        oprCvs:oprCvs
      }
      this.drawInstance = new Draw(drawOption);
      bitmap.onload = () => {
        console.log('onload===>');
        this.drawInstance.drawBitmap();
      }

    },
    openDraw() {
      this.drawInstance.openDraw();
    },
    closeDraw() {
      this.drawInstance.closeDraw();
    }
  },

}
</script>

<style lang='scss' scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .content {
    width: 80%;
    display: flex;
    .imgContainer {
      width: 360px;
      height: 600px;
      border: 1px solid green;
      margin-right: 20px;
      box-sizing: border-box;
      overflow-y: scroll;
      display: flex;
      flex-direction: column;
      .el-image {
        width: 100%;
        height: 320px;
        flex-shrink: 0;
        margin-bottom: 10px;
        cursor: pointer;
      }
      .activeImg {
        border: 2px solid rgba(0,158,255);
      }
    }
    .canvasContainer {
      position: relative;
      width: 500px;
      height: 500px;
      box-sizing: border-box;
      border: 1px solid greenyellow;
      #imgCvs {
        width: 100%;
        height: 100%;
        z-index:0;
        #bitmap {
          width: 100%;
          height: 100%;
        }
      }
      #bitmap {
        width: 100%;
        height: 100%;
      }
      #oprCvs {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
      }
      .operateBox {
        position: absolute;
        top: -50px;
        right: 20px;
        display: flex;
        .el-button {
        }
      }
    }
  }
}
</style>
